<template>
<div>
<!--  条件查询-->
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="股票名称">
      <el-input v-model="formInline.stockName" placeholder="股票名称" clearable></el-input>
    </el-form-item>
    <el-form-item label="股票类型">
      <el-select v-model="formInline.stockType" placeholder="股票类型" clearable>
        <el-option :label="m.dictLabel" :value="m.dictCode" :key="m.dictCode" v-for="m in typeList"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getStockList">查询</el-button>
      <el-button type="primary" @click="openAdd">添加</el-button>
    </el-form-item>
  </el-form>
<!--  列表-->
  <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName">
    <el-table-column
        prop="stockName"
        label="股票名称"
        width="180">
    </el-table-column>
    <el-table-column
        prop="typeName"
        label="股票类型"
        width="180">
    </el-table-column>
    <el-table-column
        prop="countryName"
        label="所属公司"
        width="180">
    </el-table-column>
    <el-table-column
        label="总股本"
        width="180">
      <template slot-scope="scope">
        {{scope.row.totalCapitalStock}}亿股
      </template>
    </el-table-column>
    <el-table-column
        label="港股股本"
        width="180">
      <template slot-scope="scope">
        {{scope.row.hongKongShareCapital}}亿股
      </template>
    </el-table-column>
    <el-table-column
        prop="chairmanGroup"
        label="法人代表"
        width="180">
    </el-table-column>
    <el-table-column
        prop="countryAddress"
        label="所属公司地址"
        width="180">
    </el-table-column>
    <el-table-column
        label="公司网址"
        width="380">
      <template slot-scope="scope">
        <el-link type="primary">{{scope.row.countryWebaddress}}</el-link>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="280">
      <template slot-scope="scope">
        <el-button
            size="mini"
            @click="handleEdit(scope.row)">编辑</el-button>
        <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="formInline.pageNum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="formInline.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
  </el-pagination>
<!--  添加/修改弹窗-->
  <el-dialog :title="title" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="名称" :label-width="formLabelWidth">
        <el-input v-model="form.stockName" ></el-input>
      </el-form-item>
      <el-form-item label="股票类型" :label-width="formLabelWidth">
        <el-select v-model="form.stockType" placeholder="请选择股票类型">
          <el-option :label="m.dictLabel" :value="m.dictCode" :key="m.dictCode" v-for="m in typeList"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属公司" :label-width="formLabelWidth">
        <el-select v-model="form.countryId" placeholder="请选择所属公司">
          <el-option :label="m.countryName" :value="m.countryId" :key="m.countryId" v-for="m in countryList"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="总股本（亿）" :label-width="formLabelWidth">
        <el-input v-model="form.totalCapitalStock" ></el-input>
      </el-form-item>
      <el-form-item label="港股股本（亿）" :label-width="formLabelWidth">
        <el-input v-model="form.hongKongShareCapital" ></el-input>
      </el-form-item>
      <el-form-item label="股东" :label-width="formLabelWidth">
        <el-checkbox-group v-model="form.ids">
          <el-checkbox :label="m.shareholderNumber"  v-for="m in shareholderList">{{m.shareholderName}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="insertUpdate">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
export default {
  data(){
    return{
      formInline:{
        pageNum:1,
        pageSize:5,

      },
      total:0,
      typeList:[],
      tableData:{},
    title:'',
      dialogFormVisible:false,
      formLabelWidth:"120px",
      form:{
        ids:[],
      },
      countryList:[],

      shareholderList:[]
    }
  },
  methods:{
    //删除
    handleDelete(id){
      this.axios.delete("http://localhost:8005/stockinfo/del?id="+id).then(r=>{
        if(r.data.code == 200){
          this.$message.success("删除成功");
          this.getStockList();
        }

      })
    },
    //打开弹窗修改信息
    handleEdit(row){
      this.form=row;
      this.getcountry();
      this.getshareholder();
      this.getshareholderByStock(row.id);
      this.dialogFormVisible=true;
      this.title="修改股票信息";
    },
    //根据股票id获取股东信息
    getshareholderByStock(id){
      this.axios.get("http://localhost:8005/StockShareHolder/getByStockId?stockId="+id).then(r=>{
        if(r.data.data !=null && r.data.data.length >0){
        this.form.ids=r.data.data;
        }else{
          this.form.ids=[];
        }
      })
    },
    //添加/修改
    insertUpdate(){
      if(this.form.id == null){
       //添加方法
        this.axios.post("http://localhost:8005/stockinfo/insert",this.form).then(r=>{
          if(r.data.code == 200){
            this.$message.success("添加成功");
            this.dialogFormVisible=false;
            this.getStockList();
          }else{
            this.$message.error(r.data.data);
          }
        })
      }else{
        //修改方法
        this.axios.post("http://localhost:8005/stockinfo/update",this.form).then(r=>{
          if(r.data.code == 200){
            this.$message.success("修改成功");
            this.dialogFormVisible=false;
            this.getStockList();
          }else{
            this.$message.error(r.data.data);
          }
        })
      }
    },
    //获取股东信息表
    getshareholder(){
      this.axios.get("http://localhost:8005/shareholder/getlist").then(r=>{
        this.shareholderList=r.data.data;
      })
    },
    //获取公司列表
    getcountry(){
      this.axios.get("http://localhost:8005/country/getlist").then(r=>{
        this.countryList=r.data.data;
      })
    },
    //打开添加弹窗
    openAdd(){
      this.title="股票添加";
      this.form={
        ids:[],
      };
    this.dialogFormVisible=true;
    this.getcountry();
    this.getshareholder();
    },
    //分页
    handleSizeChange(newSize){
      this.formInline.pageSize=newSize;
      this.getStockList();
    },
    handleCurrentChange(newpage){
      this.formInline.pageNum=newpage;
      this.getStockList();
    },
    getStockList(){
      this.formInline.pageNum=1;
      this.axios.post("http://localhost:8005/stockinfo/getlist",this.formInline).then(r=>{
        this.tableData=r.data.data.list;
        this.total=r.data.data.total;
        console.log(this.tableData);
      })
    },
    getTypeList(){
      this.axios.get("http://localhost:8005/dictData/getlist?type=sys_stock_info").then(r=>{
        this.typeList=r.data.data;
      })
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex%2 === 1) {
        return 'warning-row';
      } else if (rowIndex%2 === 0) {
        return 'success-row';
      }
      return '';
    }
  },
  created() {
  this.getTypeList();
  this.getStockList();

  }
}
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>

